<template>
    <div class="atlasCom">
        <img src="https://aisisoft-cn-homepage-1312366157.cos.ap-nanjing.myqcloud.com/ceshi/zhishi.jpg" style="width: 80%;height: auto;">
        <!-- <div class="content">
            <div :class="i == 1 ? 'left' : 'right'" v-for="i in 2" :key="i">
                <div class="item" v-for="(item, index) in i == 1 ? leftList : rightList" :key="index">
                    <div class="top" @click="jumpPage(item, 1)">
                        <img :src="item.image" />
                        <div class="title">
                            {{ item.text }}
                        </div>
                    </div>
                    <div class="cont">
                        <div class="line" :class="item.more ? 'fold' : ''">
                            <div class="item" v-for="(item2, index2) in item.item" :key="index2" @click="jumpPage(item2, 2)">
                                {{ item2.name }}
                            </div>
                        </div>
                        <div class="more" :class="item.more ? 'pour' : ''" v-if="item.item && item.item.length"
                            @click="moreClick(item)">
                            更多藏品
                            <img src="@/assets/image/more.png" />
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</template>
 
<script>
import { getStoreRoom } from '@/api/list'
import { collectionList } from '@/api/search'
export default {
    data() {
        return {
            leftList: [],
            rightList: [],
            list: [],
        }
    },
    created() {
        this.getStoreRoom()
    },
    methods: {
        getStoreRoom() {
            getStoreRoom().then(res => {
                if (res.data && res.data.length > 0) {
                    res.data.forEach(item => {
                        this.collectionList(item)
                    })
                }
            }).catch(e => {
                console.log(e);
            })
        },
        collectionList(val) {
            collectionList({ storeroom_id: val.id }).then(res => {
                this.list.push({
                    id: val.id,
                    text: val.name,
                    image: val.image,
                    item: res.data.list
                })
                this.setList()
            })
        },
        moreClick(val) {
            console.log(val);
            this.$set(val, 'more', !val.more)
        },
        jumpPage(val, type) {
            if(type == 1) {
                this.$router.push('/tomb_detail?id='+val.id)
            } else {
                this.$router.push('/object_detail?id='+val.id)
            }
        },
        setList() {
            let left = []
            let right = []
            this.list.forEach((item, index) => {
                this.$set(item, 'more', false)
                if (index % 2 == 0) {
                    left.push(item)
                } else {
                    right.push(item)
                }
            })
            this.leftList = left
            this.rightList = right
        }
    }
}
</script>
 
<style lang="scss" scoped>
.atlasCom {
    padding: 20px 0;

    .content {
        background: #fff;
        width: 1000px;
        margin: 0 auto;
        padding: 20px;
        border-radius: 18px;
        display: flex;
        justify-content: space-between;

        .left,
        .right {
            width: 48%;

            .item {
                margin-bottom: 20px;

                .top {
                    position: relative;
                    margin: 0 auto;
                    width: 50%;
                    cursor: pointer;

                    img {
                        width: 100%;
                        height: 162px;
                    }

                    .title {
                        position: absolute;
                        top: 0;
                        background: rgba($color: #2F1805, $alpha: 0.7);
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 18px;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 600;
                        color: #FFEBBA;
                    }
                }

                .cont {
                    display: flex;
                    flex-wrap: wrap;
                    font-size: 18px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    color: #A2754C;
                    margin-top: 20px;
                    text-align: left;
                    word-wrap: break-word;
                    word-break: break-word;

                    .line {
                        display: flex;
                        flex-wrap: wrap;
                        max-height: 30px;
                        overflow: hidden;
                        transition: 0.4s;

                        .item {
                            width: auto;
                            border: 1px solid #A2754C;
                            border-radius: 6px;
                            padding: 5px 10px;
                            margin-bottom: 10px;
                            margin-right: 10px;
                            cursor: pointer;
                        }
                    }

                    .fold {
                        max-height: 110px;
                        overflow: auto;
                    }

                    .more {
                        float: right;
                        text-align: center;
                        width: 80px;
                        line-height: 27px;
                        shape-outside: border-box;
                        position: relative;
                        cursor: pointer;

                        img {
                            position: absolute;
                            transition: 0.4s;
                            bottom: -2px;
                            left: calc(50% - 6px);
                        }
                    }

                    .pour {
                        img {
                            transform: rotate(180deg);
                        }
                    }
                }
            }
        }
    }
}
</style>